<template>
  <div class="order-middle">
    <div class="middle">
      <div class="middle-text">餐品详情</div>
      <div
        class="middle-cart"
        v-for="(item, index) in cartStore.carts"
        :key="index"
      >
        <van-card style="height: 8vh; margin-bottom: 2vw">
          <template #title>
            <div
              style="
                padding-left: 15vw;
                padding-top: 1vw;
                font-size: 3.5vw;
                font-weight: 600;
              "
            >
              {{ item.good.name }}
            </div>
          </template>
          <template #desc>
            <div
              style="
                padding-left: 15vw;
                padding-top: 1vw;
                font-size: 1vw;
                color: #868080;
              "
            >
              {{ item.good.description }}
            </div>
          </template>
          <template #num>
            <div>×{{ item.quantity }}</div>
          </template>
          <template #price>
            <div style="padding-left: 15vw; padding-top: 1vw; font-size: 3.5vw">
              ￥{{ item.good.price }}
            </div>
          </template>
          <template #thumb>
            <van-image
              width="25vw"
              style="max-height: 7vh"
              :src="item.good.image_path"
              alt="1"
            />
          </template>
        </van-card>
      </div>
    </div>
    <div class="subtotal">
      <van-cell-group>
        <van-cell
          title="商品小计："
          :value="'￥' + cartStore.totalPrice"
        ></van-cell>
        <!-- 优惠券单元格 -->
        <van-coupon-cell
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          @click="showList = true"
        />
        <van-cell
          title="商品合计："
          :value="'￥' + cartStore.totalPrice"
        ></van-cell>
      </van-cell-group>
      <!-- 优惠券列表 -->
      <van-popup
        v-model:show="showList"
        round
        position="bottom"
        style="height: 80vh; padding-top: 3vh"
      >
        <van-coupon-list
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          @change="onChange"
          @exchange="onExchange"
        />
      </van-popup>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { usecartStore } from "@/store/modules/module.js";

const cartStore = usecartStore();

const coupon = {
  id: 1,
  description: "",
  available: 1,
  condition: "无门槛",
  reason: "",
  value: 500,
  name: "无门槛立减5元",
  startAt: 1589104000,
  endAt: 1714592000,
  valueDesc: "5",
  unitDesc: "元",
};

const coupons = ref([coupon]);
const showList = ref(false);
const chosenCoupon = ref(-1);

const onChange = (index: number) => {
  showList.value = false;
  chosenCoupon.value = index;
};
const onExchange = (code: any) => {
  coupons.value.push(coupon);
};
</script>

<style lang="less" scoped>
.order-middle {
  margin-left: 4vw;
  margin-right: 4vw;
  margin-top: 2vw;
  padding: 1vw;
  border-radius: 4vw;
  background-color: #ffffff;
  .middle {
    max-height: 45vh;
    overflow-y: scroll;
    .middle-text {
      font-size: 4vw;
      font-weight: 800;
      padding: 2vw 2vw;
    }
  }
}
</style>
<style>
.van-coupon__condition {
  align-items: center;
  padding: 0.5vh;
}
.van-coupon__name {
  align-items: center;
  padding: 0.5vh;
}
</style>
